<template>
    <div class="main">
        <!-- <div class="selBox">
            <select class="workName">
                <option value="">业务名称</option>
            </select>
        </div> -->
        <!-- <headNav title="业务名称" :isHome="false" :isBack="false"></headNav> -->
        <div class="proTit" @click="show = true">业务名称：{{proItem.productName ? proItem.productName : '未选择'}}</div>
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
        <div class="today-box">
            <div class="titleBox" style="padding: 0 0.14rem">
                <img class="titleIcon" src="@/assets/img/todayData/resport.png" alt="">
                <span class="title">
                    今日实时报告
                </span>
                <span class="mark">
                    2020-01-24
                </span>
            </div>
            <div class="resportBox">
                <div class="min-resportBox">
                    <div v-for="(item, index) in activeData" :key="index" class="oneResport">
                        <img class="sendImg" src="@/assets/img/todayData/send.png" alt="">
                        <div class="re-content">
                            <p>
                                {{item.newsContent}}
                            </p>
                            <!-- <p class="red">
                                {{item.value}}
                            </p> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="r-box">
                <div class="titleBox">
                    <img class="titleIcon" src="@/assets/img/todayData/pag.png" alt="">
                    <span class="title">
                        今日汇总
                    </span>
                </div>
                <div class="totalBox">
                    <div class="t-top">
                        <div>
                            <p class="bold-small">
                                今日收益
                            </p>
                            <p class="bold-mid red">
                                {{todayTotal.totalProfit}}元
                            </p>
                        </div>
                        <div>
                            <p class="bold-small">
                                账户余额
                            </p>
                            <p class="bold-mid red">
                                {{todayTotal.balance}}元
                            </p>
                        </div>
                    </div>
                    <div class="one-box">
                        <div class="one-total">
                            <span>
                                渠道分成收益
                            </span>
                            <span class="bold-small blue">
                                {{todayTotal.chanelServiceRevence}}元
                            </span>
                        </div>
                        <div class="one-total">
                            <span>
                                团队拓展收益
                            </span>
                            <span class="bold-small blue">
                                {{todayTotal.teamDevelopmentBenefits}}元
                            </span>
                        </div>
                        <div class="one-total">
                            <span>
                                市场开发收益
                            </span>
                            <span class="bold-small blue">
                                {{todayTotal.marketDevelopmentIncome}}元
                            </span>
                        </div>
                        <div class="one-total">
                            <span>
                                团队拓展
                            </span>
                            <span class="bold-small blue">
                                {{todayTotal.teamDevelopmentServiceDesc}}
                            </span>
                        </div>
                        <div class="one-total">
                            <span>
                                市场开发
                            </span>
                            <span class="bold-small blue">
                                {{todayTotal.marketDevelopmentDesc}}
                            </span>
                        </div>
                        <div class="one-total">
                            <span>
                                留存用户
                            </span>
                            <span class="bold-small blue">
                                {{todayTotal.retainedNum}}
                            </span>
                        </div>
                        <div class="one-total">
                            <span>
                                新增用户
                            </span>
                            <span class="bold-small blue">
                                {{todayTotal.newNum}}
                            </span>
                        </div>
                        <div class="one-total">
                            <span>
                                到期用户
                            </span>
                            <span class="bold-small blue">
                                {{todayTotal.expiredNum}}
                            </span>
                        </div>
                    </div>
                </div>
                <div>

                </div>
            </div>
            <div class="r-box">
                <div class="titleBox">
                    <img class="titleIcon" src="@/assets/img/todayData/money.png" alt="">
                    <span class="title">
                        过去七日收益
                    </span>
                </div>
                <div class="line-box">
                    <lined :data="weekMoney"></lined>
                </div>
            </div>
            <div class="r-box">
                <div class="titleBox">
                    <img class="titleIcon" src="@/assets/img/todayData/user.png" alt="">
                    <span class="title">
                        过去七日新增用户
                    </span>
                </div>
                <div class="line-box">
                    <lines :data="weekUsers"></lines>
                </div>
            </div>
            <div class="r-box">
                <div class="titleBox">
                    <img class="titleIcon" src="@/assets/img/todayData/connect.png" alt="">
                    <span class="title">
                        关联学校用户数据
                    </span>
                </div>
                <div class="users-box">
                    <div class="oneSchool" v-for="(item, index) in userTotal" :key="index">
                        <p class="schoolName">
                            {{item.schoolName}}
                        </p>
                        <p class="u-content">
                            <span>
                                留存 
                                <span class="red">
                                    {{item.retainedNum}}
                                </span>
                            </span>
                            <span>
                                新增 
                                <span class="red">
                                    {{item.newNum}}
                                </span>
                            </span>
                            <span>
                                到期 
                                <span class="red">
                                    {{item.expiredNum}}
                                </span>
                            </span>
                            <span>
                                未定制 
                                <span class="red">
                                    {{item.unCustomized}}
                                </span>
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <bottomNav :index="1"></bottomNav>
    </div>
</template>
<script>
import lined from '@/components/echarts/line.vue'
import lines from '@/components/echarts/line1.vue'
import headNav from '@/components/headNav/headNav.vue'
import bottomNav from '@/components/bottomNav/bottomNav.vue'
import {wsUrl} from '@/config/config'
import cookie from '@/util/cookie'
export default {
    name: 'todayData',
    components: {
        headNav, bottomNav, lined, lines
    },
    data () {
        return {
            data1: [{name:'8-21', value: 12}, {name: '8-22', value: 13}],
            productId: '000',
            activeData: [],
            weekMoney: [],
            weekUsers: [],
            userTotal: [],
            todayTotal: '',
            proItem: {},
            actions: [],
            show: false

        }
    },
    mounted () {
        this.activeData = []
        this.getProductList()
    },
    methods: {
        //   业务列表
        getProductList(){
            var prams = {}
            this.$store.dispatch('channel/SelectProductList',prams).then((res) => {
                res.data = res.data ? res.data : []
                for(var obj of res.data){
                    obj.name = obj.productName
                }
                this.actions = res.data
                if (res.data.length > 0) {
                    this.proItem = res.data[0]
                    this.getData()
                }
            })
        },
        onSelect(item) {
            this.show = false
            this.proItem = item
            this.getData()
        },
        getData () {
            this.init()
            this.getSummaryToday()
            this.getLastWeek()
            this.getLastWeekUsers()
            this.getUsers()
            this.getTodayData()
        },        
        // 获取实时数据
        init () {
            var token = cookie.get('token')
            var ws = new WebSocket(wsUrl + "/agent-center", [token])
            ws.onopen = () => {
            　　//当WebSocket创建成功时，触发onopen事件
                console.log("open");
            　　ws.send("hello"); //将消息发送到服务端
            }
            ws.onmessage = (e) => {
                // var arr = e.data.split(',')
                // this.activeData.unshift({name: arr[0], value: arr[1]})
                this.activeData.unshift({newsContent: e.data})
                this.getSummaryToday()
                this.getLastWeek()
                this.getLastWeekUsers()
                this.getUsers()
            　　//当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
            }
            ws.onclose = (e) => {
                // this.init()
            　　//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            }
        },
        // 获取今日数据
        getTodayData () {
            this.$store.dispatch('todayData/GetTodayData').then(
                res => {
                    if (res.status == 200) {
                        this.activeData = res.data
                    }
                }
            )
        },
        // 获取今日日期
        getToday () {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            if (month < 10) {
                month = '0' + month
            }
            if (day < 10) {
                day = '0' + day
            }
            return  year + '-' + month + '-' + day
        },
        // 一周内 收益
        getLastWeek () {
            var params = {
                productId: this.proItem.productId,
                todayDate: this.getToday()
            }
            this.$store.dispatch('todayData/GetLastWeek', params).then(
                res => {
                    if (res.status == 200) {
                        var arr = []
                        res.data.forEach(item => {
                            arr.push({name: item.createTimeStr, value: item.profit})
                        })
                        this.weekMoney = arr
                    }
                }
            )
        },
        // 一周内 增长的用户
        getLastWeekUsers () {
            var params = {
                productId: this.proItem.productId,
                todayDate: this.getToday()
            }
            this.$store.dispatch('todayData/GetLastWeekUsers', params).then(
                res => {
                    if (res.status == 200) {
                        var arr = []
                        res.data.forEach(item => {
                            arr.push({name: item.createTimeStr, value: item.newAddPayUserNum})
                        })
                        this.weekUsers = arr
                    }
                }
            )
        },
        // 用户统计
        getUsers () {
            var params = {
                productId: this.proItem.productId,
                todayDate: this.getToday()
            }
            this.$store.dispatch('todayData/GetUsers', params).then(
                res => {
                    if (res.status == 200) {
                        this.userTotal = res.data
                    }
                }
            )
        },
        // 今日汇总
        getSummaryToday () {
            var params = {
                productId: this.proItem.productId,
                todayDate: this.getToday()
            }
            this.$store.dispatch('todayData/GetSummaryToday', params).then(
                res => {
                    if (res.status == 200) {
                        this.todayTotal = res.data
                    }
                }
            )
        }
    }
}
</script>
<style scoped>
.main{
    height: 100%;
}
.red{
    color: #FF352B;
}
.blue{
    color: #4B7BF9;
}
.today-box{
    padding: 0 0.1rem;
}
.container{
    padding: 0 0.24rem;
}
.titleBox *{
    vertical-align: middle;
    padding: 0.3rem 0;
}
.selBox{
    text-align: center;
    width: 100%;
    height: 0.88rem;
    box-sizing: border-box;
    padding-top: 0.2rem;
    background: #4B7BF9;
}
.workName{
    background: #4B7BF9;
    color: #fff;
    font-size: 0.32rem;
    font-weight: bold;
}
.titleIcon{
    width: 0.36rem;
    height: 0.4rem;
}
.title{
    font-size: 0.32rem;
    font-weight: bold;
}
.mark{
    font-size: 0.24rem;
    color: #999;
}
.resportBox{
    padding: 0.38rem 0.4rem;
    height: 3.82rem;
    background: url('../../assets/img/todayData/resortBk.png') no-repeat;
    background-size: 100%;
    box-sizing: border-box;
}
.min-resportBox{
    overflow: auto;
    height: 3rem;
}
.oneResport{
    padding: 0.13rem 0;
}
.re-content{
    display: inline-block;
    margin-left: 0.16rem;
    width: 88%;
    vertical-align: middle;
}
.resportBox p{
    font-size: 0.26rem;
    line-height: 0.38rem;
}
.sendImg{
    width: 0.49rem;
    height: 0.5rem;
    vertical-align: middle;
}
.totalBox{
    border-radius: 0.15rem;
}
.t-top{
    box-shadow: 0 0.02rem 0.15rem 0 rgba(0, 0, 0, 0.06);
}
.t-top >div{
    display: inline-block;
    width: 50%;
    padding: 0.2rem 0;
    text-align: center;
    background: #fff;
}
.t-top .bold-small, .t-top .bold-mid{
    line-height: 0.48rem;
}
.bold-small{
    font-weight: bold;
    font-size: 0.26rem;
}
.bold-mid{
    font-weight: bold;
    font-size: 0.32rem;
}
.one-box{
    box-shadow: 0px 0.05rem 0.1rem 0px rgba(0, 0, 0, 0.06);
}
.one-total{
    display: flex;
    justify-content: space-between;
    padding: 0.3rem;
    border-bottom: 0.01rem solid #F7F7F7;
    background: #fff;
}
.line-box{
    width: 100%;
    height: 3.52rem;
    background: #fff;
}
.users-box{
    padding: 0.29rem;
    background: #FFFFFF;
    box-shadow: 0px 0.02rem 0.15rem 0px rgba(0, 0, 0, 0.06);
    border-radius: 0.15rem;
}
.oneSchool{
    padding: 0.29rem 0;
}
.schoolName{
    font-size: 0.28rem;
    font-weight: bold;
    margin-bottom: 0.2rem;
}
.u-content >span{
    display: inline-block;
    width: 25%;
    font-size: 0.24rem;
    color: #666666;
}
.marquee_top{
    transition: all 0.5s;
    margin-top: -0.3rem;
}
.proTit{
    height: 0.88rem;   
    background: #4B7BF9;
    line-height: 0.88rem;
    color: #FFFFFF;
    font-size: 0.32rem;
    text-align: center;
}
</style>